Vue.component('book-menu', {
    data: function () {
        return {
            navData: []
        }
    },

    created : function () {
        //加载导航栏信息
        this.loadNav();
    },
    methods : {
        loadNav : function () {
            //将vue对象赋值给that，防止this的上下文改变
            let that = this;
            atm.ajax({
                url : '/user/getNav',
                requestMethod : 'POST',
                data : {
                },
                success : function (responseData) {
                    that.navData = responseData.data;
                }
            });
        },
        toBooks : function (firstNavId, secondNavId, thirdNavId) {
            window.location.href = '/books/' + firstNavId + '/' + secondNavId + '/' + thirdNavId;
        }
    },
    template: '    <el-menu\n' +
        '            default-active="2"\n' +
        '            class="el-menu-vertical-demo">\n' +
        '        <el-submenu :index="firstNav.id" v-for="firstNav in navData">\n' +
        '            <template slot="title">\n' +
        '                <i class="el-icon-location"></i>\n' +
        '                <span>{{firstNav.navName}}</span>\n' +
        '            </template>\n' +
        '\n' +
        '\n' +
        '            <el-submenu :index="secondNav.id" v-for="secondNav in firstNav.childers">\n' +
        '                <template slot="title">{{secondNav.navName}}</template>\n' +
        '\n' +
        '                <el-menu-item :index="thirdNav.id" v-for="thirdNav in secondNav.childers"\n' +
        '                              @click="toBooks(firstNav.id, secondNav.id, thirdNav.id)">{{thirdNav.navName}}</el-menu-item>\n' +
        '            </el-submenu>\n' +
        '\n' +
        '        </el-submenu>\n' +
        '\n' +
        '\n' +
        '    </el-menu>'
})